<template>
    <div class="network-operating-record">
        <search-table
            :columns="columns"
            :data="operatingRecordList"
            @change-page="changePageNow"
            @change-size="changePageSize"
            :total="total"
            :page.sync="pageIndex"
            :size.sync="pageSize">
            <template slot="select-group">
                <Select filterable
                    v-model="teamId"
                    placeholder="请选择团队"
                    filterable
                    clearable
                    @on-change="changePageNow(1)">
                    <Option  v-for="item in currentTeamList" :value="item.id"  :key="item.id" :title="item.name">{{item.name}}</Option>
                </Select>
                <Select filterable
                    v-model="apiName"
                    placeholder="请选择操作类型"
                    filterable
                    clearable
                    @on-change="changePageNow(1)">
                    <Option value="allocatePublicIp" title="分配公网地址">分配公网地址</Option>
                    <Option value="switchPublicIp" title="切换公网地址">切换公网地址</Option>
                    <Option value="releasePublicIp" title="释放公网地址">释放公网地址</Option>
                    <Option value="changeMaxBandwidth" title="修改公网带宽峰值">修改公网带宽峰值</Option>
                </Select>
            </template>
        </search-table>
    </div>
</template>

<script>
    import SearchTable from '@/components/SearchTable/SearchTable'
    import teamMixin from '@/mixin/groupMixin'
    import { getLogs } from '@/api/cloud'

    export default {
        name: 'network-operating-record',
        components: {
            SearchTable
        },
        mixins: [teamMixin],
        props: {
            disabledAllBtn: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                total: 0, // 总数据量
                teamId: '', // 搜索条件，团队ID
                apiName: '', // 搜索条件，操作类型
                pageSize: 10, // 分页大小
                pageIndex: 1, // 当前页
                columns: [
                    {
                        placement: 'top-left',
                        title: '操作者',
                        key: 'username',
                        align: 'center',
                        tooltip: true,
                        width: 230
                    },
                    {
                        placement: 'top-left',
                        title: '被操作团队',
                        key: 'team',
                        tooltip: true,
                        width: 230,
                        render:(h,params) => {
                            let data = params.row || {}
                            return h('span', this.escapeTeamId(data.teamId));
						}
                    },
                    {
                        title: '操作',
                        width: 150,
                        key: 'apiNameCn'
                    },
                    {
                        title: '操作时间',
                        width: 150,
                        key: 'dataTime'
                    },
                    {
                        title: '信息',
                        key: 'description'
                    }
                ],
                operatingRecordList: [] // 摄像头列表
            }
        },
        mounted() {
            this.getLogs()
        },
        computed: {
            currentTeamList() { // 过滤掉目标方管理员组
                return this.teamList.filter(item => item.name !== '目标方管理员组')
            }
        },
        methods: {
            // 将teamId转义为对应的teamName
            escapeTeamId(id) {
                if (id) {
                    return (this.currentTeamList.find(item => item.id === id) || {}).name
                } else {
                    return ''
                }
            },
            // 修改分页大小
            changePageSize(val) {
                this.pageSize = val
                this.getLogs()
            },
            // 修改当前页
            changePageNow(val) {
                this.pageIndex = val
                this.getLogs()
            },
            // 查询日志记录
            getLogs() {
                getLogs({
                    pageIndex: this.pageIndex,
                    pageSize: this.pageSize,
                    projectId: this.$route.query.prjid,
                    teamId: this.teamId || undefined,
                    apiName: this.apiName || undefined
                }).then(({ code, data, message }) => {
                    if (code !== 1) {
                        this.$Message.warning(message)
                        return
                    }
                    this.total = data.total || 0
                    this.operatingRecordList = data.list || []
                }).catch(() => {
                    this.$Message.error('获取外网分配列表异常')
                })
            }
        },
        watch: {
        },
        beforeDestroy(){
        }
    }
</script>

<style scoped>
</style>